﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>骰子</title>
    <style>
        body {
            background: #ccc;
        }

        p {
            padding: 0;
            margin: 0;
        }
        /*创建舞台的样式*/
        .stage {
            width: 100px;
            height: 100px;
            /*background:#fff;*/
            perspective: 2000px;
            margin: 100px auto 0;
            transform-style: preserve-3d;
            border: .0px solid gray;
            position: relative;
            transition: all 1s;
            animation:;
            transform: rotateX(-25deg) rotateY(15deg);
        }

            .stage:hover {
                transform: rotateX(180deg) rotateY(180deg);
            }
        /*创建面的样式*/
        .con {
            width: 100%;
            height: 100%;
            background: #fff;
            opacity: 1;
            border-radius: 10px;
            position: absolute;
        }
        /*创点的样式*/
        .dot {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: blue;
        }
        /*  控制点的位置*/
        .stage .con:first-child {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .stage .con:first-child .dot {
                width: 40px;
                height: 40px;
                background: red;
            }

        .stage .con:nth-child(4) .dot {
            background: red;
        }

        .stage .con:nth-child(2) {
            display: flex;
            justify-content: space-around;
        }

            .stage .con:nth-child(2) .dot:nth-child(2) {
                align-self: flex-end;
            }

        .stage .con:nth-child(3) {
            display: flex;
            justify-content: space-around;
        }

            .stage .con:nth-child(3) .dot:nth-child(2) {
                align-self: center;
            }

            .stage .con:nth-child(3) .dot:nth-child(3) {
                align-self: flex-end;
            }

        .stage .con:nth-child(4) {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

            .stage .con:nth-child(4) .scon {
                display: flex;
                justify-content: space-around;
            }

        .stage .con:nth-child(5) {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

            .stage .con:nth-child(5) .scon {
                display: flex;
                justify-content: space-around;
            }

                .stage .con:nth-child(5) .scon:nth-child(2) {
                    display: flex;
                    justify-content: center;
                }

        .stage .con:nth-child(6) {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

            .stage .con:nth-child(6) .scon {
                display: flex;
                justify-content: space-around;
            }
        /*旋转六个面,形成一个立方体*/
        .stage .con:first-child {
            transform: translateZ(50px);
        }

        .stage .con:nth-child(6) {
            transform: translateZ(-50px);
        }

        .stage .con:nth-child(2) {
            transform: translateX(-50px) rotateY(90deg);
        }

        .stage .con:nth-child(5) {
            transform: translateX(50px) rotateY(90deg);
        }

        .stage .con:nth-child(3) {
            transform: translateY(-50px) rotateX(90deg);
        }

        .stage .con:nth-child(4) {
            transform: translateY(50px) rotateX(90deg);
        }
    </style>
</head>
<body>
    <div class="stage">
        <div class="con">
            <p class="dot"></p>
        </div>
        <div class="con">
            <p class="dot"></p>
            <p class="dot"></p>
        </div>
        <div class="con">
            <p class="dot"></p>
            <p class="dot"></p>
            <p class="dot"></p>
        </div>
        <div class="con">
            <div class="scon">
                <p class="dot"></p>
                <p class="dot"></p>
            </div>
            <div class="scon">
                <p class="dot"></p>
                <p class="dot"></p>
            </div>
        </div>
        <div class="con">
            <div class="scon">
                <p class="dot"></p>
                <p class="dot"></p>
            </div>
            <div class="scon">
                <p class="dot"></p>
            </div>
            <div class="scon">
                <p class="dot"></p>
                <p class="dot"></p>
            </div>
        </div>
        <div class="con">
            <div class="scon">
                <p class="dot"></p>
                <p class="dot"></p>
            </div>
            <div class="scon">
                <p class="dot"></p>
                <p class="dot"></p>
            </div>
            <div class="scon">
                <p class="dot"></p>
                <p class="dot"></p>
            </div>
        </div>

    </div>
    <button>随机旋转</button>
</body>
<script src="jquery.js"></script>
<script>

   //随机旋转角度
    $("button").click(function(){
        var arr=[-4,-3,-2,-1,0,1,2,3,4];
        var a = Math.floor(Math.random()*9);
        var b = Math.floor(Math.random()*9);
        $(".stage").css({
            transform: "rotateX("+(arr[a]*90)+"deg) rotateY("+(arr[b]*90)+"deg)"
        });

    });
</script>
</html> 